<template>
  <el-container style="height: 100vh;">
    <el-header style="text-align: right; font-size: 12px;">
      <!-- 头部导航栏 -->
    </el-header>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-row :gutter="10">
              <el-col :span="3">
                <el-card  style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">员工</div>
                    <i style="font-weight: bold; color: #42b983">{{ employeeCount }}</i>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">公告</div>
                    <i style="font-weight: bold; color: #42b983">{{ annCount }}</i>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card  style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">审批</div>
                    <i style="font-weight: bold; color: #42b983">1223</i>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">报销</div>
                    <i style="font-weight: bold; color: #42b983">1223</i>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card  style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">发票</div>
                    <i style="font-weight: bold; color: #42b983">1223</i>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">客户</div>
                    <i style="font-weight: bold; color: #42b983">1223</i>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card  style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">合同</div>
                    <i style="font-weight: bold; color: #42b983">1223</i>

                  </div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card  style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                  <div class="card-content">
                    <div class="text" style="font-weight: bold; color: #42b983">合同</div>
                    <i style="font-weight: bold; color: #42b983">1223</i>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="5">
              <el-col :span="6">
                <el-card class="custom-card" style="background-color:#f9f9f9; border: 1px solid #e1f3d8; border-radius: 8px;" @click="gotoEmployee">
                  <div class="card-content">
                    <i class="bi bi-telephone"></i>
                    <div class="text">通讯录</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="custom-card" style="background-color: #f9f9f9; border: 1px solid #dcdcdc;padding: 1px; border-radius: 8px;" @click="gotoschedule">
                  <div class="card-content">
                    <i class="bi bi-calendar-check"></i>
                    <div class="text">日程安排</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="custom-card" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;"  @click="gotodebriefing">
                  <div class="card-content">
                    <i class="bi bi-card-checklist"></i>
                    <div class="text">工作汇报</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="custom-card" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;" @click="gotoworkRecords">
                  <div class="card-content">
                    <i class="bi bi-filter-square"></i>
                    <div class="text">工作记录</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-card class="box-card">
                  <template #header>
                    <span>快捷入口</span>
                  </template>
                  <el-row :gutter="20" >
                    <el-col :span="6"  >
                      <el-card class="custom-card1" style="background-color:#f9f9f9; border: 1px solid #e1f3d8; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(255,0,98,0.62);font-size: 40px"><UserFilled /></el-icon>
                          <div class="text">请假申请</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,255,157,0.63);font-size: 40px"><HomeFilled /></el-icon>
                          <div class="text">出差申请</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <i class="bi bi-bus-front"  style="color:rgba(0,119,255,0.88);font-size: 40px"></i>
                          <div class="text">外出申请</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(255,98,0,0.83);font-size: 40px"><Platform /></el-icon>
                          <div class="text">加班申请</div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color:#f9f9f9; border: 1px solid #e1f3d8; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(153,0,255,0.83);font-size: 40px"><Shop /></el-icon>
                          <div class="text">采购申请</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,178,255,0.83);font-size: 40px"><Tools /></el-icon>
                          <div class="text">物品维修</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(255,0,47,0.83);font-size: 40px"><Stamp /></el-icon>
                          <div class="text">印章申请</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="6">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,102,255,0.94);font-size: 40px"><Van /></el-icon>
                          <div class="text">车辆申请</div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="box-card">
                  <template #header>
                    <span>待办事项</span>
                  </template>
                  <el-row :gutter="20" >
                    <el-col :span="8"  >
                      <el-card class="custom-card1" style="background-color:#f9f9f9; border: 1px solid #e1f3d8; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(255,0,98,0.62);font-size: 40px">156</el-icon>
                          <div class="text">待审批</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span=8>
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,255,157,0.63);font-size: 40px">134</el-icon>
                          <div class="text">待审报销</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,119,255,0.88);font-size: 40px">112</el-icon>
                          <div class="text">待审发票</div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" >
                    <el-col :span="8"  >
                      <el-card class="custom-card1" style="background-color:#f9f9f9; border: 1px solid #e1f3d8; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(255,0,98,0.62);font-size: 40px">156</el-icon>
                          <div class="text">待回款</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span=8>
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,255,157,0.63);font-size: 40px">134</el-icon>
                          <div class="text">待审合同</div>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="custom-card1" style="background-color: #f9f9f9; border: 1px solid #dcdcdc; padding: 1px; border-radius: 8px;">
                        <div class="card-content">
                          <el-icon class="icon" style="color:rgba(0,119,255,0.88);font-size: 40px">112</el-icon>
                          <div class="text">待完成任务</div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <template #header>
                <span>公告列表</span>
              </template>
              <el-table
                  :data="announcementArr"
                  style="width: 100%; max-height: 230px; overflow-y: auto;">
                <el-table-column prop="title" label="公告标题" align="center" width="400px">
                  <template #default="scope">
                    <el-button link type="primary" size="large" @click="showContent(scope.row.id)">{{ scope.row.title }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="18">
            <el-card class="box-card">
              <template #header >
                <span>活跃员工</span>
              </template>
              <el-table :data="projects" style="  width: 100%;max-height: 300px; overflow-y: auto;">
                <el-table-column prop="id" label="项目编号"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="name" label="项目名称"></el-table-column>
                <el-table-column prop="username" label="负责人"></el-table-column>
                <el-table-column prop="time" label="项目周期"></el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div slot="header" class="clearfix">
                <span>活跃员工</span>
              </div>
              <el-table :data="employees" style="width: 100%">
                <el-table-column type="index" label="排名" width="80px" align="center">
                  <template #default="scope">
          <span :style="getRowStyle(scope.$index)">
            <i v-if="scope.$index < 3" :class="getIconClass(scope.$index)"></i>
            {{ scope.$index + 1 }}
          </span>
                  </template>
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="150px">
                  <template #default="scope">
                    <span :style="getRowStyle(scope.$index)">{{ scope.row.username }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="onlineDuration" label="活跃时长(h)" align="center">
                  <template #default="scope">
                    <span :style="getRowStyle(scope.$index)">{{ scope.row.onlineDuration }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <template>
                <el-pagination :total="10" />
              </template>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <template #header>
                <span>任务列表</span>
              </template>
              <el-table style="width: 100%">
                <el-table-column prop="id" label="任务编号"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="name" label="任务名称"></el-table-column>
                <el-table-column prop="username" label="负责人"></el-table-column>
                <el-table-column prop="deadline" label="截止日期"></el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
  <!--公告内容弹窗-->
  <el-dialog
      :title="dialogContentTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogContentVisible"
      :before-close="handleClose">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="公告标题" >
            <el-input placeholder="请输入" v-model="saveAnnouncementForm.title" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布人">
            <el-input placeholder="请输入" v-model="saveAnnouncementForm.username" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-input
              type="textarea"
              v-model="saveAnnouncementForm.content"
              :rows="15"
              readonly
              style="font-size: large"
          >
          </el-input>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>

</template>

<script setup>
//定义变量控制弹窗是否出现
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";

const getRowStyle = (index) => {
  const baseFontSize = 25;
  const fontSize = Math.max(baseFontSize - index-3, 18); // 最小字体大小为10px
  const colors = ['#FF5722', '#FFC107', '#4CAF50', '#2196F3', 'blue', '#9C27B0', '#E91E63', '#673AB7', '#3F51B5', '#FF9800']; // 前三个颜色
  const color = index < 10? colors[index] : '#606266';
  return { fontSize: `${fontSize}px`, color };
};

const getIconClass = (index) => {
  const icons = ['bi bi-fire', 'bi bi-fire', 'bi bi-fire', 'bi bi-fire', 'bi bi-fire'];
  return icons[index];
};

const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogTitle = ref('新建公告');
//定义变量控制弹窗是否出现
const dialogContentVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogContentTitle = ref('公告详情');
const showContent =(id)=>{
  dialogContentVisible.value = true;
  dialogContentTitle.value = '公告详情';
  axios.get(BASE_URL+'/oa1/announcement/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      //注意！后端返回的是List,我们需要取出list中的第1条数据！！
      saveAnnouncementForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg)
    }
  })
}
const gotoEmployee = ()=>{
  router.push('/employees')
}
const gotoschedule = ()=>{
  router.push('/schedule')
}
const gotoworkRecords = ()=>{
  router.push('/workRecords')
}
const gotodebriefing = ()=>{
  router.push('/debriefing')
}

// 用户列表
const users = ref(getUser());
//定义对象用来收集保存表单的数据
const saveAnnouncementForm = ref({
  title:'',
  content:'',
  createTime:'',
  userId:'',
  type:'',
  status:'',
  publishTime:'',
  updateTime:'',
});
//处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本窗口吗?')){
    //关闭弹窗,并清空双向绑定的表单数据
    dialogVisible.value = false;
    saveAnnouncementForm.value = {};
    dialogContentVisible.value= false;
    saveAnnouncementForm.value = {};
  }
}

//定义对象用来保存查询条件
const searchAnnouncementForm = ref({announcementModule:'', status:'',name:''});
//定义对象保存查询到的表格数据
const announcementArr = ref([]);
//定义加载用户的方法
const loadAnnouncement = ()=>{
  let data = qs.stringify(searchAnnouncementForm.value);//username=tom&status=1
  //如果有查询条件,就根据后面拼接的条件查,没有条件默认加载所有用户数据
  axios.get(BASE_URL+'/oa1/announcement/select?'+data)
      .then((response)=>{//回调函数中处理响应结果
        if(response.data.code == 2000){
          announcementArr.value = response.data.data;//将后端响应数据装入用户数组中
          console.log(announcementArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//定义重置搜索条件的方法
/* 页面一加载完毕,立即执行 */
onMounted(()=>{
  loadAnnouncement()
  loadactiveemployees()
})
//定义状态
const statusTypeArr = ref([]);
const statusTypeFormatter = (row,column,cellValue,index)=>{
  if(!statusTypeArr.value){
    return cellValue;
  }
  for(let item of statusTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
//定义模块
const announcementTypeArr = ref([]);
const announcementTypeFormatter = (row,column,cellValue,index)=>{
  if(!announcementTypeArr.value){
    return cellValue;
  }
  for(let item of announcementTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
const announcementProcessArr = ref([]);
const announcementProcessFormatter = (row,column,cellValue,index)=>{
  if(!moduleTypeArr.value){
    return cellValue;
  }
  for(let item of announcementProcessArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

onMounted(()=>{
  loadDictOption(announcementTypeArr,'announcement_type');
  loadDictOption(statusTypeArr,'general_status');
  loadEmployeeCount();
  loadAnnCount();
})
const employees= ref([]);
const loadactiveemployees = ()=>{
  axios.get(BASE_URL+'/oa1/user/selectByDuration').then((response)=>{
    if(response.data.code == 2000){
      employees.value = response.data.data;
      console.log(employees.value)
      console.log(11111122233333)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const employeeCount = ref(0);
const loadEmployeeCount = ()=>{
  axios.get(BASE_URL+'/oa1/user/selectCount').then((response)=>{
    if(response.data.code == 2000){
      employeeCount.value = response.data.data;
      console.log(employeeCount.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const annCount = ref(0);
const loadAnnCount = ()=>{
  axios.get(BASE_URL+'/oa1/announcement/selectCount').then((response)=>{
    if(response.data.code == 2000){
      annCount.value = response.data.data;
      console.log(2222222)
      console.log(annCount.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style>

.progress-bar {
  display: flex;
  align-items: center;
}
.box-card {
  margin-bottom: 20px;
}
.custom-card {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  white-space: nowrap;

}

.custom-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color:dodgerblue;
}
.card-content {
  text-align: center;
}
.icon {
  font-size: 24px; /* 调整图标的大小 */
  margin-bottom: 6px; /* 图标和文字之间的间距 */
}

.text {
  font-size: 14px; /* 调整文字的大小 */
}
.custom-card1 {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100px;
  width: 100%;
  margin-top: 5px;
}

.custom-card1:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>